<template>
  <div>
    <div class="pt14">
      <div class="divBox normal-page">
        <el-card header="Graph">
   
          <el-divider content-position="left">节点面板</el-divider>
          <div class="flex-wrapper">
            <div className="dnd-item wrapper" @mousedown="handleDragRect">矩形</div>
            <div className="dnd-item wrapper" @mousedown="handleDragCircle">圆形</div>
            <div className="dnd-item wrapper" @mousedown="handleDragDiamond">菱形</div>
            <div className="dnd-item wrapper" @mousedown="handleDragEllipse">椭圆</div>
            <div className="dnd-item wrapper" @mousedown="handleDragPolygon">多边形</div>
            <div className="dnd-item wrapper" @mousedown="handleDragText">文本</div>
          </div>
          <el-divider />
          <div ref="containerRef" id="graph" class="viewport"></div>
        </el-card>
        <div class="container" ref="container"></div>
      </div>
    </div>
  </div>
  
</template>
 
<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";

import { DndPanel, SelectionSelect, Control, NodeResize, Menu, InsertNodeInPolyline} from "@logicflow/extension";
import "@logicflow/extension/lib/index.css";

// import "@logicflow/core/dist/style/index.css"; // 2.0版本前的引入方式

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "draw",
  data() {
    return {
      lf: null,
    };
  },
  // setup() {
  //   const lfRef = ref(null);
  //   return { lfRef };
  // },

  mounted() {
    this.lf = new LogicFlow({
      container: this.$refs.container,
      plugins: [ DndPanel, SelectionSelect, Control, NodeResize, Menu, InsertNodeInPolyline ],
      grid: true,
    });
    this.lf.render();
    // lfRef.value = lf
    this.init()

  
  },
  methods: {
    init(){
      var lf = this.lf
      lf.extension.dndPanel.setPatternItems([
        {
          label: '选区',
          icon: '',
          callback: () => {
            lf.extension.selectionSelect.openSelectionSelect();
            lf.once('selection:selected', () => {
              lf.extension.selectionSelect.closeSelectionSelect();
            });
          }
        },
        {
          type: 'circle',
          text: '开始',
          label: '开始节点',
          icon: '',
        },
        {
          type: 'rect',
          label: '用户任务',
          icon: '',
          className: 'important-node'
        },
        {
          type: 'rect',
          label: '系统任务',
          icon: '',
          className: 'import_icon'
        },
        {
          type: 'diamond',
          label: '条件判断',
          icon: '',
        },
        {
          type: 'circle',
          text: '结束',
          label: '结束节点',
          icon: '',
        },
        {
          type: 'polygon',
          x: 100,
          y: 200,
          text: '多边形',
        },
        {
     
          type: 'text',
          x: 500,
          y: 200,
          text: '纯文本节点',
        },
      ]);
      
      this.lf.render();
    },

    
    
  },
};
</script>
 
<style scoped>
.container {
  display: flex;
  width:auto;
  height: 800px;
  flex-grow: 1; /*铺满剩余空间*/
  border: 3px solid #ababab;
  overflow: hidden;
}

.flex-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

*:focus {
  outline: none;
}

.rect {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #000;
}

.circle {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
}

.dnd-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}

.wrapper {
  width: 80px;
  height: 50px;
  background: #fff;
  border: 2px solid #000;
}
</style>